<template>
  <div class="page">
    <data-box ref="databox" :params="params" :server="servers.getImportData" row-key="cupoBatch" autoSearch>
      <!--输入区域-->
      <template slot="input">
        <el-form-item label="模板名称" prop="templateName" v-role="0x080301">
          <el-input v-model="params.templateName"></el-input>
        </el-form-item>
      </template>
      <template slot="button">
        <!--按钮区域-->
        <el-button @click="dialog.excelImport = true" v-role="0x080302">新增模板</el-button>
      </template>

      <!--数据列区域-->
      <template slot="column">
        <el-table-column type="index" label="序号" width="40">
        </el-table-column>
        <el-table-column prop="_id" label="模板编号" min-width="100">
          <template scope="scope">
            <el-button type="text" size="模板名称" @click="openCaseDetail(scope)">{{scope.row.id}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="templateName" label="名称" min-width="90">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="90">
        </el-table-column>
        <el-table-column prop="creator" label="创建人" min-width="60">
        </el-table-column>
        <el-table-column prop="caseHandNum" label="操作" min-width="60">
          <template scope="scope">
            <el-button @click="updateClick(scope)" type="text" size="small" v-role="0x080303">修改</el-button>
            <el-button @click="deleteClick(scope)" type="text" size="small" v-role="0x080304">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <!--弹出框-->
    <el-dialog title="新增模板" v-model="dialog.excelImport" @open="getClientList" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <ExcelImport @errMsg="errMsgShow" @success="refreshData" @close="dialog.excelImport = false">
      </ExcelImport>
    </el-dialog>
    <!--修改-->
    <el-dialog @open="updateTemplateData" title="修改模板" v-model="dialog.updateExcel" size="small" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
      <ExcelImport @errMsg="errMsgShow" @success="refreshData" ref="change" @close="dialog.updateExcel = false">
      </ExcelImport>
    </el-dialog>
    <!--EXCEL错误弹出框-->
    <el-dialog title="Excel数据错误" v-model="dialog.errMsgOpen" size="tiny" :show-close="true" :close-on-click-modal="false" :close-on-press-escape="false">
      <data-box :data="errMsgData" hiddenForm class="text-center" :maxHeight="230">
        <template slot="column">
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="errorMsg" label="错误提示" min-width="110">
          </el-table-column>
        </template>
      </data-box>
    </el-dialog>
  </div>
</template>
<script>
  import net from '@/util/net'
  import server from '@/config/servers'
  import DataBox from '@/components/DataBox'
  import FileUpload from '@/components/FileUpload'
  import { validateMin, validateMax, downloadFile, truePhoneRules } from '@/util/common'
  import { mapState, mapActions } from 'vuex'
  import ExcelImport from '@/views/config-manage/ExcelImport'
  import CaseFileImport from '@/views/case-manage/CaseFileImport'
  // 案件详情
  import DetailsTab from '@/components/DetailsTab'
  import CustInform from '@/views/case-manage/CustInform'
  import PayInform from '@/views/case-manage/PayInform'
  import AttachInform from '@/views/case-manage/AttachInform'
  // 下载模板
  import App from '@/config/app'

  export default {
    name: 'case-import',
    data() {
      return {
        loading: {
          state: false
        },
        checkResult: [],
        servers: {
          getImportData: server.ConfigManage.query_excel_template // 获取导入数据列表
        },
        // databox参数
        params: {
          templateName: ''
        },
        selectData: {},
        input: '',
        // 数据范围验证
        validate: {
          validateMin,
          validateMax,
          truePhoneRules
        },
        // 案件详情客户信息
        tabsArr: [{
          title: '客户信息',
          pane: 'custInform'
        }, {
          title: '还款信息',
          pane: 'payInform'
        }, {
          title: '附件信息',
          pane: 'attachInform'
        }],
        caseDetail: {
          cust: {
            type: 'IMPORT',
            batchNumber: '',
            idCardNumber: '',
            custId: ''
          },
          pay: {
            type: 'IMPORT',
            orderId: '',
            productId: ''
          },
          attach: {
            type: 'IMPORT',
            caseNum: ''
          }
        },
        // 删除导入
        deleteImport: {
          batchNum: ''
        },
        // 弹出框状态
        dialog: {
          excelImport: false,
          fileImport: false,
          deleteImport: false,
          caseDetail: false,
          multipleFileImport: false,
          caseSubmit: false,
          errMsgOpen: false,
          updateExcel: false
        },
        modifyData: '',
        selectedItem: {},
        // 错误信息弹框
        errMsgData: []
      }
    },
    computed: {
      ...mapState({
        clientList: state => state.caseManage.client_list,
        batchtList: state => state.caseManage.batch_list
      }),
      isImported() {
        return this.batchtList.length > 0
      }
    },
    deactivated() {
      this.dialog.caseDetail = false
    },
    methods: {
      updateTemplateData() {
        this.$nextTick(() => {
          this.$refs['change'].refreshData(this.modifyData)
        })
      },
      /**
       * 错误信息弹出
       */
      errMsgShow(data) {
        console.log(data)
        this.dialog.errMsgOpen = true
        this.errMsgData = data
      },
      ...mapActions([
        'getClientList',
        'getBatchList'
      ]),
      /**
       * 下载模板
       */
      downloadTemplate() {
        downloadFile(App.url.template, '案件导入模板')
      },
      /**
       * 案件确认
       */
      checkCaseFile() {
        this.dialog.caseSubmit = true
        net.send({
          server: this.servers.checkImportFile
        }).then(
          data => {
            this.checkResult = []
          },
          ({ object }) => {
            this.checkResult = object
          }
        )
      },
      /**
       * 删除模版
       */
      deleteClick(scope) {
        this.$confirm('您确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 发送删除数据请求
          net.send({
            server: server.ConfigManage.delete_excel_template,
            data: {
              id: scope.row.id
            }
          }).then((data) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 更新数据信息
            this.refreshData()
          }, ({ reason }) => {
            this.$message({
              type: 'info',
              message: reason
            })
          })
        })
      },
      /**
       * 修改模版
       */
      updateClick(scope) {
        this.dialog.updateExcel = true
        this.modifyData = scope.row
      },
      /**
       * 打开案件详情弹出框
       */
      openCaseDetail(scope) {
        this.caseDetail.attach.caseNum = scope.row.id
        this.caseDetail.cust.batchNumber = scope.row.batchNumber
        this.caseDetail.cust.custId = scope.row.custId
        this.caseDetail.cust.idCardNumber = scope.row.idCardNumber
        this.caseDetail.pay.productId = scope.row.productId
        this.caseDetail.pay.orderId = scope.row.orderId

        this.dialog.caseDetail = true
      },
      getFileList() {
        this.$nextTick(() => {
          this.$refs['case-file-upload'].getCaseFileList()
        })
      },
      /**
       * 刷新列表数据
       */
      refreshData() {
        this.$refs['databox'].refresh()
      }
    },
    components: {
      DataBox,
      FileUpload,
      ExcelImport,
      CaseFileImport,
      // 案件详情
      DetailsTab,
      CustInform,
      PayInform,
      AttachInform
    },
    mounted() {
      this.getBatchList()
      this.getClientList()
    }
  }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
